<!-- 优惠卷 -->
<template>
  <view>
    <view class="alldiv">
      <!-- 这个是返回 -->
      <view class="navdiv">
        <u-navbar
          back-text="返回"
          @leftClick="navigateBack"
          :leftText="language.Coupon.nav"
        ></u-navbar>
      </view>
      <!-- 主体区域 -->
      <view class="bodydiv">
        <!-- 菜单分类 -->
        <view class="taglistdiv">
          <u-subsection
            :list="list"
            mode="subsection"
            border="none"
            :current="current"
            @change="sectionChange"
          ></u-subsection>
        </view>
        <!-- 这个是列表 -->
        <view class="listdiv">
          <view class="ldiv">
            <view class="lidiv" v-for="(item, i) in yhlist" :key="i">
              <!--    这个是这边金额区域 -->
              <view class="leftdiv">
                <!-- 这个是头部是 -->
                <view class="lefttagdiv" v-if="item.tagtext"
                  ><u-badge type="warning" :value="item.tagtext"></u-badge>
                </view>
                <view v-if="item.tagtext" class="licostdiv" style="height: 85%">
                  <view
                    style="
                      height: 60%;
                      width: 100%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                    ><span style="font-size: 12px; color: rgba(255, 51, 51, 1)"
                      >￥<span
                        style="
                          margin-left: 10px;
                          font-size: 36px;
                          font-weight: bold;
                          color: rgba(255, 51, 51, 1);
                        "
                        >{{ item.yhcost }}</span
                      ></span
                    ></view
                  >
                  <view
                    style="
                      height: 40%;
                      width: 100%;
                      display: flex;
                      justify-content: center;
                    "
                    ><span
                      style="font-size: 10px; color: rgba(255, 51, 51, 1)"
                      >{{ item.yhms }}</span
                    ></view
                  >
                </view>
                <view v-else class="licostdiv" style="height: 100%">
                  <view
                    style="
                      height: 60%;
                      width: 100%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                    ><span style="font-size: 12px; color: rgba(255, 51, 51, 1)"
                      >￥<span
                        style="
                          margin-left: 10px;
                          font-size: 36px;
                          font-weight: bold;
                          color: rgba(255, 51, 51, 1);
                        "
                        >{{ item.yhcost }}</span
                      ></span
                    ></view
                  >
                  <view
                    style="
                      height: 40%;
                      width: 100%;
                      display: flex;
                      justify-content: center;
                    "
                    ><span
                      style="font-size: 10px; color: rgba(255, 51, 51, 1)"
                      >{{ item.yhms }}</span
                    ></view
                  >
                </view>
              </view>
              <!-- 这个是右边描述信息区域样式 -->
              <view class="rightdiv">
                <view class="rigdiv">
                  <view
                    style="
                      width: 100%;
                      height: 45%;
                      display: flex;
                      align-items: flex-end;
                      margin-left: 10%;
                      font-size: 14px;
                      color: rgba(51, 51, 51, 1);
                    "
                    >{{ item.yhtitle }}</view
                  >
                  <view
                    style="
                      width: 100%;
                      height: 10%;
                      margin-left: 10%;
                      font-size: 10px;
                      color: rgba(153, 153, 153, 1);
                    "
                    >{{ item.yxqtime }}</view
                  >
                  <view
                    style="
                      width: 100%;
                      height: 45%;
                      margin-left: 10%;
                      font-size: 10px;
                      color: rgba(153, 153, 153, 1);
                    "
                    >{{ item.yhsm }}</view
                  >
                </view>
                <view class="rigbtndiv">
                  <view v-if="item.buttontext == '去使用'">
                    <u-button
                      type="primary"
                      color="rgba(47, 212, 184, 1)"
                      :text="item.buttontext"
                    ></u-button>
                  </view>
                  <view v-else>
                    <u-button
                      type="primary"
                      color="rgba(153, 153, 153, 1)"
                      :text="item.buttontext"
                    ></u-button>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      language: {},
      current: 0,
      list: [],
      //   优惠卷列表
      yhlist: [
        {
          yhcost: "8",
          yhms: "满39可用",
          yhtitle: "打车优惠券",
          yxqtime: "有限期至 2024.12.03",
          yhsm: "使用说明",
          tagtext: "全品类通用",
          buttontext: "去使用",
        },
        {
          yhcost: "8",
          yhms: "满39可用",
          yhtitle: "打车优惠券",
          yxqtime: "有限期至 2024.12.03",
          yhsm: "使用说明",
          buttontext: "已使用",
        },
        {
          yhcost: "8",
          yhms: "满39可用",
          yhtitle: "打车优惠券",
          yxqtime: "有限期至 2024.12.03",
          yhsm: "使用说明",
          buttontext: "已失效",
        },
        {
          yhcost: "8",
          yhms: "满39可用",
          yhtitle: "打车优惠券",
          yxqtime: "有限期至 2024.12.03",
          yhsm: "使用说明",
          buttontext: "已失效",
        },
        {
          yhcost: "8",
          yhms: "满39可用",
          yhtitle: "打车优惠券",
          yxqtime: "有限期至 2024.12.03",
          yhsm: "使用说明",
          buttontext: "已失效",
        },
      ],
    };
  },
  onShow: function () {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  },
  onLoad() {
    this.getlanguagedata();
  },
  mounted() {
    this.getlanguagedata();
  },
  methods: {
    getlanguagedata() {
      this.language =
        this.$store.getters["internationalization/getinternationalization"];
      this.list = this.language.Coupon.lists;
    },
    sectionChange(index) {
      this.current = index;
    },
    // 返回上一个页面
    navigateBack() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.alldiv {
  width: 100vw;
  height: 100vh;
  .navdiv {
    width: 100%;
    height: 10%;
    overflow: hidden;
    z-index: 999999;
  }
  //   这个是主体区域样式
  .bodydiv {
    width: 100%;
    height: 90%;
    // 这个是菜单分类样式
    .taglistdiv {
      width: 100%;
      height: 10%;
      z-index: 99999;
      display: flex;
      align-items: center;
    }
    // 这个是优惠卷列表
    .listdiv {
      width: 100%;
      height: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      .ldiv {
        width: 95%;
        height: 100%;
        overflow: auto;
        //   这个是子元素列表
        .lidiv {
          width: 100%;
          height: 30%;
          margin-bottom: 10px;
          opacity: 1;
          border-radius: 8px;
          background: rgba(255, 255, 255, 1);
          display: flex;
          //   这个是这边金额区域样式
          .leftdiv {
            width: 30%;
            height: 100%;
            opacity: 1;
            background: linear-gradient(
              135deg,
              rgba(47, 212, 183, 0.17) 0%,
              rgba(64, 239, 136, 0.07) 100%
            );
            // 这个是标签
            .lefttagdiv {
              width: 100%;
              height: 15%;
            }
            // 这个是金额元素区域
            .licostdiv {
              width: 100%;
              height: auto;
            }
          }
          //   这个是右边描述信息区域样式
          .rightdiv {
            width: 70%;
            height: 100%;
            display: flex;
            // 这个是描述区域
            .rigdiv {
              width: 50%;
              height: 100%;
            }
            // z这个是是按钮区域
            .rigbtndiv {
              width: 50%;
              height: 100%;
              display: flex !important;
              align-items: center !important;
              justify-content: flex-end !important;
            }
          }
        }
      }
    }
  }
}
/deep/ .u-subsection__item.u-subsection__item--2.u-subsection__item--last {
  border: none !important;
}
/deep/ .u-subsection__item--last {
  border: none !important;
  border: none !important;
}
/deep/ .u-subsection__item--no-border-right {
  border: none !important;
}
/deep/ .u-subsection__item--no-border-right {
  border: none !important;
}

/deep/ .u-subsection__bar--center {
  background: rgba(47, 212, 184, 1) !important;
  border-radius: 8px !important;
}
/deep/ .u-subsection__bar--last {
  background: rgba(47, 212, 184, 1) !important;
  border-radius: 8px !important;
}
/deep/ .u-subsection__bar--first {
  background: rgba(47, 212, 184, 1) !important;
  border-radius: 8px !important;
}
/deep/ .u-text__value--main {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  width: 90%;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
/deep/ .u-text__value--content {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  width: 90%;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
/deep/ .u-subsection {
  display: flex;
  flex-direction: row !important;
  position: relative !important;
  overflow: hidden !important;
  width: 75% !important;
  box-sizing: border-box !important;
}
/deep/ .u-badge {
  display: flex;
  flex-direction: row;
  border-radius: 0;
  line-height: 11px;
  width: 60% !important;
  text-align: center;
  font-size: 10px !important;
  font-weight: bold;
  justify-content: center !important;
  border-radius: 6px 0px 6px 0px !important;
  color: #ffff !important;
  background: linear-gradient(
    135deg,
    rgba(255, 141, 26, 1) 0%,
    rgba(255, 82, 82, 1) 100%
  );
}
/deep/ .u-button--normal {
  width: 80px !important;
  height: 32px !important;
  border-radius: 15px !important;
}
</style>
